iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 8
0
Modern Web

CSS大全閱讀筆記系列 第 8

第二章:選擇器(6)

  • 分享至 

  • xImage
  •  

(接上篇的虛擬類別選擇器部分)


  1. 虛擬類別選擇器:
    e. 介面狀態虛擬類別:
    - 能讓radio、checkbox等使用者介面元素依據目前的狀態改變樣式。
    - 啟用與停用使用者介面元素::enabled是啟用狀態,也是預設設定,:disabled是停用狀態,比較常用,被停用的元素會顯示在畫面上,但無法被選取、啟用,或做任何使用者互動。
    - 選取狀態::checked為選取狀態,預設是為選取狀態,但沒有:unchecked這個選擇器。另外,也可以用新出現的選擇器:indeterminate表示不是選取或非選取的狀態,但這個虛擬類別只能透過DOM腳本設定,使用者無法自行設定,且這只是純視覺效果,不會影響元素實際狀態元素的實際狀態,只有選取或非選取兩種
    - default虛擬類別::default會指向一組類似元素中預設的使用者介面元素,一般用在表單項目、按鈕、選單等部分,:default會指向一開始就被選取的元素(可以和:checked一起使用)。
    - optional虛擬類別::required會選取所有必填的表單控制項,:optional則會選取沒有required屬性或required屬性為false的控制項(在HTML中寫成<input type="email" required>、或是<input type="email" required="false">),但表單輸入元素外的元素,都不能是必填或選填。
    - valid虛擬類別::valid代表使用者輸入值通過所有本身驗證條件的使用者輸入元素,invalid則指向不滿足本身條件驗證的使用者輸入元素,這兩個虛擬類別只能用在有能力驗證資料的元素,因此<div>元素不能用,<input>元素能用。但使用:valid:invalid時會因為不同系統樣式給出不同回應數值,所以謹慎使用。
    - 範圍虛擬類別:只能用在具有煩為限制的元素上,有表示在HTML5設定的min與max元素之間的:in-range,和超出範圍out-of-range兩種。另外,HTML5可以設定step屬性,所以如果值落在min和max之間,但不符合step的設定值,就會出現同時符合:in-rangeinvalid的情況(例如HTML寫成<input id="test" type="number" min="0" max="1000" step="10" value="">
    - 可變性虛擬類別::read-write能讓使用者編輯輸入項,其中HTML中所有非停用、非唯讀的input元素,以及被設定contenteditable屬性的元素都屬都屬於此類,其餘元素的預設都是:read-only,但可以通過在HTML中設定contenteditable屬性來改變。

(介面狀態虛擬類別結束,虛擬類別選擇器未完)


上一篇
第二章:選擇器(5)
下一篇
第二章:選擇器(7)
系列文
CSS大全閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言